<link rel="import" href="../../bower/core-icons/core-icons.html">
<link rel="import" href="../../bower/core-icons/social-icons.html">
<link rel="import" href="../../bower/core-signals/core-signals.html">
<link rel="import" href="../../bower/paper-fab/paper-fab.html">
<link rel="import" href="../../bower/polymer/polymer.html">
<link rel='import' href='../../bower/paper-progress/paper-progress.html'>
<link rel='import' href='roster-group.html'>
<link rel='import' href='faq-link.html'>

<polymer-element name='uproxy-roster' attributes='contacts, mode'>

  <template>
    <style>
    #search {
      display: block;
      box-sizing: border-box;
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      line-height: 20px;
      color: #888;
      outline: none;
      border: none;
      border-bottom: 1px solid rgb(221, 221, 221);
      -webkit-transition: all 0.23s !important;
      -moz-transition: all 0.23s !important;
      transition: all 0.23s !important;
    }
    #search:hover {
      border-color: #aaa;
    }
    ::-webkit-input-placeholder {
      color: #ccc;
    }
    .no-friends {
      width: 150px !important;
      height: 150px !important;
      color: #cbcbcb;
    }
    core-icon.no-friends {
      color: #e5efee;
    }
    #empty-roster-instructions-container {
      padding: 0 30px 50px;
      text-align: center;
      position: absolute;
      top: 30px;
      bottom: 0;
      right: 0;
      left: 0;
    }
    #empty-roster-instructions {
      box-shadow: 0 4px 10px 0px #ccc;
      border-radius: 3px;
      padding: 60px 0 30px;
      position: absolute;
      top: 0;
      bottom: 122px;
      right: 30px;
      left: 30px;
      min-height: 218px; /* TODO: keep downArrow and add button anchored to bottom when min-height kicks in. Ideally we'll get this for free with https://github.com/uProxy/uproxy/issues/2547 */
    }
    #empty-roster-instructions h1 {
      color: #003C48;
      font-size: 16px;
      font-weight: 500;
      max-width: 240px;
      margin: 30px auto;
    }
    .downArrow {
      color: #fff;
      position: absolute;
      right: 54px;
      bottom: 105px;
      font-size: 20px;
      text-shadow: 0 7px 10px #ccc;
    }
    paper-progress {
      margin-bottom: 1em;
    }
    hr {
      border: 0;
      margin-top: 32px;
      border-bottom: solid 1px;
      border-color: rgb(238, 238, 238);
    }
    #orWrapper {
      position: absolute;  /* take out of the flow */
      top: 50%;
      /* compensate for padding at the bottom and orCircle height */
      transform: translateY(-77px);
      width: 100%;
      text-align: center;
      left: 0;  /* needed for proper centering */
    }
    #orCircle {
      display: inline-block;
      height: 40px;
      border-radius: 50%;
      background-color: white;
      width: 40px;
    }
    #orText {
      font-size: 14px;
      padding-top: 9px;
      color: #12A391;
    }
    .centerVertical {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    </style>

    <div id="empty-roster-instructions-container" hidden?="{{ hasContacts }}">
      <div id="empty-roster-instructions">
        <img src='../../icons/emptylist.svg'>
        <h1>{{ "EMPTY_ROSTER_INSTRUCTIONS" | $$(model.globalSettings.language) }}</h1>
      </div>
    </div>
    <div class='downArrow' hidden?="{{ hasContacts }}">▼</div>

    <div hidden?='{{ !hasContacts }}'>

      <!-- uProxy contacts offering access to or requesting access from user -->
      <uproxy-roster-group
          groupTitle='{{ (mode == ui_constants.Mode.GET ? "OFFERS" : "REQUESTS") | $$(model.globalSettings.language) }}'
          contacts='{{ contacts.pending }}'
          mode='{{ mode }}'></uproxy-roster-group>

      <!-- Hide HR above Trusted if there are no Trusted contacts, or if there are no Pending contacts -->
      <hr color="#eee"
          hidden?='{{ contacts.pending.length == 0 || contacts.trustedUproxy.length == 0 }}'></hr>

      <!-- trusted uProxy contacts -->
      <uproxy-roster-group
          groupTitle='{{ (mode == ui_constants.Mode.GET ? "FRIENDS_WHO_SHARE" : "FRIENDS_WHO_CAN_GET") | $$(model.globalSettings.language) }}'
          contacts='{{ contacts.trustedUproxy }}'
          mode='{{ mode }}'></uproxy-roster-group>

      <!-- Hide HR above Untrusted if there are no Untrusted contacts, or if there are no Trusted & Pending contacts -->
      <hr color="#eee"
          hidden?='{{ contacts.untrustedUproxy.length == 0 || (contacts.trustedUproxy.length == 0 && contacts.pending.length == 0) }}'></hr>

      <!-- untrusted uProxy contacts -->
      <uproxy-roster-group
          groupTitle='{{ "UPROXY_FRIENDS" | $$(model.globalSettings.language) }}'
          contacts='{{ contacts.untrustedUproxy }}'
          mode='{{ mode }}'></uproxy-roster-group>
    </div>

  </template>

  <script src='roster.js'></script>

</polymer-element>
